<template>
  <el-card>
    <template #header>商品列表</template>

    <div>
      <!-- 1.0 表格数据 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template v-slot="{ row }">
            <!-- {{ row }} -->
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品ID">
                <span>{{ row.id }}</span>
              </el-form-item>
              <el-form-item label="商品名称">
                <span>{{ row.name }}</span>
              </el-form-item>
              <el-form-item label="所属分类">
                <span>{{ row.category }}</span>
              </el-form-item>
              <el-form-item label="商品价格">
                <span>{{ row.price }}</span>
              </el-form-item>
              <el-form-item label="创建时间">
                <span>{{ row.ctime }}</span>
              </el-form-item>
              <el-form-item label="商品评价">
                <span>{{ row.rating }}</span>
              </el-form-item>
              <el-form-item label="商品销量">
                <span>{{ row.sellCount }}</span>
              </el-form-item>
              <el-form-item label="商品描述">
                <span>{{ row.goodsDesc }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="name"> </el-table-column>
        <el-table-column label="所属分类" prop="category"> </el-table-column>
        <el-table-column label="商品价格" prop="price"> </el-table-column>
        <el-table-column label="商品图片">
          <template v-slot="{ row }">
            <img :src="baseUrl + row.imgUrl" alt="" />
          </template>
        </el-table-column>
        <el-table-column label="商品描述" prop="goodsDesc"> </el-table-column>
        <el-table-column label="操作" width="180">
          <template v-slot="{ row }">
            <el-button type="primary" size="mini">编辑</el-button>
            <el-button type="danger" size="mini" @click="delGoods(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!--  2.0 分页渲染 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
import { getGoods, DeleteGoods } from '@/api/goods.js'

export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      baseUrl: 'http://39.106.222.189:5000/upload/imgs/goods_img/'
    }
  },
  created() {
    this.getGoodsList()
  },
  methods: {
    async getGoodsList() {
      const { data, total } = await getGoods({
        currentPage: this.currentPage,
        pageSize: this.pageSize
      })
      console.log(data)
      this.tableData = data
      this.total = total
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getGoodsList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      this.getGoodsList()
    },
    delGoods(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 在这里发起请求
          const { code } = await DeleteGoods({ id })
          // console.log(data)
          if (code === 0) {
            this.getGoodsList()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style lang="less" scoped>
img {
  width: 50px;
  height: 50px;
}

.el-form {
  display: flex;
  flex-wrap: wrap;

  .el-form-item {
    width: 40%;
  }
}
</style>
